<template>
	<view class="box">
		<view class="title-box">
			<view class="left">
				<text class="label">多人拼团</text>
				<text class="desc">团购更优惠</text>
			</view>
			<view class="right" @click="goPage('/pages/aPackage/goodsGroupList/goodsGroupList')">
				<text class="more">更多</text>
				<u-icon name="arrow-right" color="#333333" size="30rpx"></u-icon>
			</view>
		</view>
		<view class="list-box">
			<view class="item" v-for="(item,index) in list" :key="index">
				<u--image :showLoading="true"
				:src="item.goods_thumb" 
				width="200rpx" 
				height="200rpx"
				radius="20rpx"></u--image>
				<view class="name">{{item.goods_name}}</view>
				<view class="bottom">
					<text class="label">￥</text>
					<text class="money">{{item.shop_price}}</text>
					<view class="desc">拼团到手价</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: function() {
					return []
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 20rpx 0;
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-top: 20rpx;
		.title-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			.left {
				.label {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
				}
				.desc {
					font-size: 28rpx;
					color: #666666;
				}
			}
			.right {
				display: flex;
				align-items: center;
				.more {
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
		.list-box {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			padding: 0 20rpx;
			justify-content: space-between;
			.item {
				width: 325rpx;
				background-color: #FAFAFA;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;
				.name {
					font-size: 28rpx;
					color: #333333;
					font-weight: 700;
				}
				.bottom {
					display: flex;
					align-items: center;
					.label {
						font-size: 20rpx;
						color: #BF8160;
					}
					.money {
						font-size: 36rpx;
						font-weight: 700;
						color: #BF8160;
					}
					.desc {
						color: #AC867E;
						font-size: 20rpx;
						background-color: #030303;
						display: block;
						padding: 2rpx 0rpx;
						border-radius: 4rpx;
						margin-left: 10rpx;
						text-align: center;
						width: 140rpx;
					}
				}
			}
		}
	}
</style>